<template>
  <up-checkbox
    :label="label"
    :name="name"
    :activeColor="activeColor"
    :inactiveColor="inactiveColor"
    :size="size"
    :iconSize="iconSize"
    :labelColor="labelColor"
    :labelSize="labelSize"
    :="$attrs"
    class="nw-checkbox"
  >
    <template #icon>
      <slot name="icon"></slot>
    </template>
    <template #label>
      <slot name="label"></slot>
    </template>
  </up-checkbox>
</template>

<script setup>
defineOptions({
  name: 'CustomCheckbox',
  inheritAttrs: false
})

const props = defineProps({
  label: {
    type: [String, Number],
    default: ''
  },
  name: {
    type: [String, Number],
    default: ''
  },
  activeColor: {
    type: String,
    default: '#27be87'
  },
  inactiveColor: {
    type: String,
    default: '#bbbbbb'
  },
  size: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(24)
  },
  labelColor: {
    type: String,
    default: () => '#333'
  },
  labelSize: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(22)
  },
  iconSize: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(16)
  }
})

const modelValue = defineModel({
  type: [String, Number],
  default: ''
})
</script>

<style lang="scss" scoped>
.nw-checkbox.u-checkbox {
  margin: 0;
  :deep(.u-checkbox__icon-wrap) {
    width: 24rpx !important;
    height: 24rpx !important;
    margin-right: 8rpx;
    border-radius: 50%;
  }
}
</style>
